<template>
    <div class="personal-teacher-top">
        <span class="personal-teacher-span">
            个人资料
        </span>
    </div>
    <div class="personal-teacher-content">
        <el-scrollbar max-height="550px">
            <el-form :model="savedForm" :rules="rules" label-width="120px" status-icon ref="savedFormRef">
                <el-form-item label="姓名" prop="username">
                    <el-input v-model="userInfo.username" disabled />
                </el-form-item>
                <el-form-item label="用户名" prop="nickName">
                    <el-input v-model="savedForm.nickName" />
                </el-form-item>
                <el-form-item label="学院" prop="academy">
                    <el-input v-model="userInfo.academy" disabled />
                </el-form-item>
                <el-form-item label="个人简介" prop="synopsis">
                    <el-input class="cinfoinput" maxlength="100" placeholder="快来写下你的个性简介吧~" show-word-limit
                        v-model="savedForm.synopsis" type="textarea" rows="4" />
                </el-form-item>
                <el-form-item>
                    <el-button color="rgba(129, 179, 55, 0.5)" type="primary" @click="changeUserInfo(savedFormRef)">
                        保存
                    </el-button>
                </el-form-item>
                <!-- <el-form-item label="获奖记录" class="personal-field" v-if="userInfo.userId == 2">
                    <div class="personal-record">
                        <WinningRecord class="personal-record"></WinningRecord>
                    </div>
                </el-form-item> -->
            </el-form>
        </el-scrollbar>
    </div>
</template>

<script setup>
// import WinningRecord from '@/components/Personal/WinningRecord.vue';
import { PutUserInfo } from '@/api/front/contest.js';
// import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const store = useStore();
const savedFormRef = ref(null)

// 获取用户信息
const userInfo = store.state.userInfo;
// 创建空数据表，暂时用来存放数据
const savedForm = ref({
    userId: userInfo.userId,
    nickName: userInfo.nickname,
    phone: userInfo.phone,
    synopsis: userInfo.synopsis,
    profilePath: userInfo.avatar,
});

// 修改用户信息
const changeUserInfo = async (formRef) => {
    if (!formRef) {
        ElMessage.error('上传失败')
        return
    }
    await formRef.validate(async (valid, fields) => {
        if (valid) {
            // console.log('submit!');
            // 上传作品
            // console.log(savedForm.value)
            const res = await PutUserInfo(savedForm.value)
            // console.log('RES',res)
            if (res.data == '修改成功') {
                ElMessage({
                    message: `修改成功`,
                    type: 'success',
                    duration: 1000,
                });
                const newUserInfo = {
                    userId: userInfo.userId,
                    roleId: userInfo.roleId,
                    role: userInfo.role,
                    username: userInfo.username,
                    nickname: savedForm.value.nickName,
                    phone: userInfo.phone,
                    avatar: userInfo.avatar,
                    synopsis: savedForm.value.synopsis,
                    academy: userInfo.academy,
                    token: userInfo.token,
                }
                store.commit('setUserInfo', newUserInfo);
                localStorage.userInfo = JSON.stringify(newUserInfo);
            } else {
                ElMessage.error('上传失败')
            }
        } else {
            console.log('error submit!', fields);
        }
    });
}
// 表单规则
const rules = reactive({
    username: [
        { required: false, trigger: 'blur' },
    ],
    nickName: [
        { required: true, message: '用户名不可为空', trigger: 'blur' }
    ],
    academy: [
        { required: false, trigger: 'blur' }
    ],
    synopsis: [
        { required: false, trigger: 'blur' }
    ]
})

defineExpose({ changeUserInfo })
</script>

<style lang="scss">
.personal-teacher-content {
    height: 550px;

    .el-form {
        margin-left: 30px;
    }

    .el-input {
        width: 200px;
    }

    .cinfoinput {
        width: 330px;
    }
}

.personal-teacher-button {
    margin-left: 100px;
}

.personal-field {
    width: 100%;
    margin-top: 10px;

    .personal-record {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 93%;
    }

}
</style>